<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
    <style>
        .div {
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div id="app">
        <p>鼠标修饰符、表单修饰符</p>
        <div class="div div1" @click="left" @click.right="right" @click.middle="mid"></div>
        <hr>
        <!-- 表单修饰符，写在v-model上 -->
        <!-- 只能输入数字。使用场景：电话、数量、金额等。。。 -->
        <input type="text" v-model.number="val1">
        <!-- 过滤首尾空格 使用场景：用户名、密码 -->
        <input type="text" v-model.trim="val2">
        <!-- 延迟响应，不是实时响应用户的操作 -->
        <input type="text" v-model.lazy="val3">
        <p>{{val3}}</p>
        <hr>
        <p>模拟v-model</p>
        <input type="text" @change="getVal" :value="val4">
        <p>{{val4}}</p>
        <p>1. 收集输入框中值的变化，同步更新p标签。先获取输入框的值，p标签中应该是变量，将这个值赋值给p的变量</p>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                val1: 0,
                val2: '',
                val3: '',
                val4: ''
            },
            methods: {
                left() {
                    console.log('left');
                },
                right() { // contextmenu
                    console.log('right');
                },
                mid() {
                    console.log('mid');
                },
                getVal(e) {
                    console.log(e.target.value);
                    this.val4 = e.target.value
                }
            }
        })
    </script>
</body>
</html>